<template>
    <div id="orderList">
        <el-table :data="list" border style="width: 100%">
             <el-table-column prop="index" label="#" width="50"></el-table-column>
            <el-table-column prop="order_number" label="订单编号" width="200"></el-table-column>
            <el-table-column prop="order_price" label="订单价格" width="200"></el-table-column>
             <el-table-column  prop="isPay" label="是否付款" width="200">
                 <template slot-scope="scope">
                    <el-tag :type="scope.row.type">{{scope.row.isPay}}</el-tag>
                 </template>
             </el-table-column>
             <el-table-column prop="is_send" label="是否发货" width="200"></el-table-column>
            <el-table-column prop="create_time" label="订单时间" width="200">
                <template slot-scope="scope">{{scope.row.create_time | moment("YYYY-MM-DD, hh:mm:ss")}}
                </template>
            </el-table-column>
            <el-table-column prop="" label="操作">
                <template slot-scope="scope">
                  <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagenum"
            :page-sizes="[2, 5, 10, 15]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
       
        <el-dialog title="修改订单信息" :visible.sync="dialogFormVisible">
                <el-form :model="editForm" :rules="rules" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
                     <el-form-item label="是否发货" prop="price" >
                        <el-select v-model="value1" placeholder="是否发货" @change="sendChange">
                        <el-option
                            v-for="item in isSend"
                            :key="item.index"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                        </el-form-item>
                        <el-form-item label="是否支付" prop="price">
                            <el-select v-model="value2"  placeholder="是否支付" @change="payChange">
                                <el-option
                                    v-for="item in isPay"
                                    :key="item.index"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    <el-form-item label="商品价格" prop="price">
                            <el-input v-model.number="editForm.price"  prop="price"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="subEdit">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return {
            text:"",
            value1:"",
            value2:"",
            list:[],
            pagenum:1, //当前页面
            pagesize: 10, //每页显示的条数
            total:0,
            dialogFormVisible:false,
            editFrom:{
                order_id:""
            },
            //修改订单的数据
            editForm:{
                price:"",
                sendStatus:"",
                address:"",
                order_pay:""
            },
            //是否发货
           isSend:[
               {
               label:"是",
               index:1,
               value:"1"
               },
               {
                label:"否",
                index:2,
                 value:"0"
               }
            ],
            //是否支付
            isPayVal:"",
            isPay:[
                {
                    label:"已付款",
                    index:3,
                    value:1
                },
                 {
                    label:"未付款",
                    index:4,
                    value:0
                }
            ],
            rules:{
                price:[
                    { required: true, message: '价格不能为空'},
                    { type: "number", message: '价格必须为数字值',trigger: ['blur', 'change']}
                ]
            },
            
         }
    },
    methods:{
        //获取订单列表数据并对一些数据加以处理
        getList(){
            this.$http.get("orders",
            {params:{pagenum: this.pagenum,pagesize:this.pagesize},
            headers:{"Authorization":localStorage.getItem("token")}})
            .then(res=>{
                if(res.body.meta.status == 200){
                    this.list = res.body.data.goods
                    this.total = res.body.data.total
                    this.list.forEach((item,i)=>{
                        item.index = i+1;
                        if(item.order_pay == 0){
                            item.isPay = "未付款"
                            item.type = "danger"
                        }
                        else if(item.order_pay == 1){
                            item.isPay = "已付款" 
                             item.type = "success"
                        }
                    })
                       console.log(res.body)
                }
            })
        },
        edit(row){
            this.editFrom.order_id = row.order_id
            this.editForm.price = row.order_price
            this.dialogFormVisible = true
        },
        subEdit(){
            this.dialogFormVisible = false;
          // console.log( this.editFrom.order_pay)
           this.$http.put("orders/"+this.editFrom.order_id,
           { order_price:this.editForm.price,is_send: this.editForm.sendStatus,order_pay:this.editFrom.order_pay+1 },
           { headers:{"Authorization":localStorage.getItem("token")} })
           .then(res=>{
               if(res.body.meta.status == 201){
                  // console.log(res.body)
                    this.getList()
                     this.$message({
                        message: '修改成功',
                        type: 'success'
                        });
                    }
                    else{
                          this.$message.error('修改失败');
                    }
                    this.value1 = ""
                    this.value2 = ""
                    // console.log(res.body)
           })
        },
        sendChange(val){
          this.editForm.sendStatus=val
        },
        payChange(val){
          this.editFrom.order_pay = val
          console.log( this.editFrom.order_pay)
        },
        handleSizeChange(val) {
            this.pagesize = val
            this.getList()
        },
        handleCurrentChange(val) {
           this.pagenum = val;
           this.getList()
        }
    },
    created(){
        this.$store.commit("changeTitle",{"t1":"订单管理","t2":"订单列表"})
        this.getList()
    }
}
</script>

 <style lang="scss" scoped>
    #orderList{
        .el-table{
            margin: 20px 0
        }
    }
</style>